<template>
  <page-wrap back title="搜索" stayStill hideTab>
    <view class="search">
      <view class="navBarContainer" :class="tolower ? 'tolower' : ''">
        <view class="box-bg">
          <text class="icon icon-search" @click="tolower = false"></text>
          <view class="input-view">
            <u-input v-model="keyword" class="topSearch" :class="keyword ? '' : 'left_icon'" placeholder="搜索招聘会/报告"
              shape="circle" :border="false" clearable @focus="isSearched = false"></u-input>
          </view>
          <view v-if="keyword" class="btn btn-primary btn-search" @click="handleSearchClick">搜索</view>
        </view>
        <text class="icon icon-search-out" @click="tolower = false"></text>
      </view>

      <LocalSearchHistory v-show="!isSearched" ref="search" localKey="zphSearchHistory" @tagClick="handleTagClick" />

      <view class="afterSearch" v-if="isSearched">
        <view class="tabs-wrap">
          <u-tabs-swiper ref="tabs" class="tabs" :is-scroll="false" :list="tabList" :current="current"
            :active-color="activeColor" inactive-color="#555555" :height="90" :font-size="28" bar-width="56"
            bar-height="14" :bar-style="barStyleObj" :gutter="40" :duration="0.2" :active-item-style="activeStyle"
            @change="tabsChange"></u-tabs-swiper>
        </view>
        <swiper class="swiper-box" :duration="200" :current="swiperCurrent" @transition="handleTransition"
          @animationfinish="handleAnimation">
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="scroll-views zph-list" :enhanced="true" :bounces="false"
              :scroll-anchoring="true" @scrolltolower="zphLoadMore" @scroll="scroll">
              <ZphItem class="item" v-for="item in zphList" :key="item.id" :item="item" />
              <u-loadmore v-if="zphList.length || !zphLoaded" class="list-more" :status="zphMoreLoading"
                :load-text="loadText" />
              <Empty v-if="zphLoaded && !zphList.length" :baseImg="zphEmptyImg" text="招聘会正在筹备，敬请期待" :fontWeight="400" />
            </scroll-view>
          </swiper-item>
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="scroll-views" :enhanced="true" :bounces="false" :scroll-anchoring="true"
              @scrolltolower="reportLoadMore" @scroll="scroll">
              <ReportItem v-for="item in reportList" :isPreview="true" :key="item.mpaActivityId" :reportItem="item" />
              <u-loadmore v-if="reportList.length || !reportLoaded" class="list-more" :status="reportMoreLoading"
                :load-text="loadText" />
              <Empty v-if="reportLoaded && !reportList.length" :baseImg="zphEmptyImg" text="暂无数据" :fontWeight="400" />
            </scroll-view>
          </swiper-item>

          <!-- 职讯 -->
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="scroll-views" :enhanced="true" :bounces="false" :scroll-anchoring="true"
              @scrolltolower="articleLoadMore" @scroll="scroll">
              <ArticleItem v-for="(item, index) in articleList" class="list-item" :key="index" :item="item"
                @update="handleUpdate($event, index)" @delete="handleDelete($event, index, 'article')"></ArticleItem>
              <u-loadmore v-if="articleList.length || !articleLoaded" class="list-more" :status="articleMoreLoading"
                :load-text="loadText" />
              <Empty v-if="articleLoaded && !articleList.length" :baseImg="zphEmptyImg" text="暂无数据" :fontWeight="400" />
            </scroll-view>
          </swiper-item>
          <!-- 专刊 -->
          <swiper-item class="swiper-item">
            <scroll-view scroll-y class="scroll-views" :enhanced="true" :bounces="false" :scroll-anchoring="true"
              @scrolltolower="issueLoadMore" @scroll="scroll">
              <SpecialIssueItem v-for="item in specialIssueList" class="list-item" :key="item.issueId" :item="item"
                @delete="handleDelete($event, index, 'specialIssue')">
              </SpecialIssueItem>
              <u-loadmore v-if="specialIssueList.length || !issueLoaded" class="list-more" :status="issueMoreLoading"
                :load-text="loadText" />
              <Empty v-if="issueLoaded && !specialIssueList.length" :baseImg="zphEmptyImg" text="暂无数据"
                :fontWeight="400" />
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <view v-if="showDeleteModal" class="modal-drawer">
      <view class="modal-mask" @click="showDeleteModal = false">
        <view class="modal-drawer-content" :style="[modalStyle]">
          <view v-if="!isModalTop" class="icon icon-arrow-up" :style="'left:' + arrowLeft + 'px'"></view>
          <view class="delete-box" @click.stop>
            <view class="delete-item" @click="handleDislike">
              <text class="icon icon-delete"></text>
              <view class="item-content">
                <view class="item-content-title">不感兴趣</view>
                <view class="item-content-lable">减少这类内容</view>
              </view>
            </view>
            <view class="delete-item" @click="handleShiedldAuthor">
              <text class="icon icon-shield"></text>
              <view class="item-content">
                <view class="item-content-title">屏蔽作者:{{
                    deleteItem.personDetail.personIname ||
                    deleteItem.ownName ||
                    deleteItem.ownId
                  }}</view>
                <view class="item-content-lable">将为你屏蔽该作者内容</view>
              </view>
            </view>
          </view>
          <view v-if="isModalTop" class="icon icon-arrow-down" :style="'left:' + arrowLeft + 'px'"></view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { reqGetIndexReportList } from "@/api/modules/report";
import { getZphList } from "@/api/modules/zph";
import {
  updateLink,
  getSpecialIssue,
  getJobInfo,
} from "@/api/modules/career.js";

import ZphItem from "@/components/ZphItem";
import LocalSearchHistory from "../components/LocalSearchHistory";
import ReportItem from "@/components/reportItem/index.vue";
import ArticleItem from "@/components/ArticleItem";
import SpecialIssueItem from "@/components/SpecialIssueItem";

import Empty from "@/components/Empty.vue";

export default {
  components: {
    ZphItem,
    LocalSearchHistory,
    ReportItem,
    ArticleItem,
    SpecialIssueItem,
    Empty,
  },
  data() {
    return {
      isShowIcon: true,
      emptyImg: this.$imgBaseSelf + "report/emptyImg.png",
      zphEmptyImg: this.$imgBaseSelf + "common/empty.png",
      isOpen: false,
      isSearched: false,
      loading: false,
      showDeleteModal: false,
      isModalTop: false,
      deleteItem: {},
      modalStyle: {},
      zphList: [],
      reportList: [],
      articleList: [], //职讯列表
      specialIssueList: [], //专刊列表
      deleteType: "",
      keyword: "",
      deleteIndex: 0,
      option: { auto: false, page: 1 },
      zphPageParams: {
        pageNo: 1,
        pageSize: 20,
        finished: false,
        loading: false,
      },
      reportPageParams: {
        pageNo: 0,
        pageSize: 20,
        finished: false,
        loading: false,
      },
      articlePageParams: {
        pageNo: 0,
        pageSize: 20,
        finished: false,
        loading: false,
      },
      issuePageParams: {
        pageNo: 0,
        pageSize: 20,
        finished: false,
        loading: false,
      },
      tabList: [
        {
          name: "招聘会",
        },
        {
          name: "报告",
        },
        {
          name: "职讯",
        },
        {
          name: "专刊",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      tolower: false,
      oldTime: 0,
      activeColor: this.$primaryColor,
      barStyleObj: {
        backgroundColor: "transparent",
        backgroundImage: `url(${this.$imgBaseSelf}/select.png)`,
        backgroundSize: "100% 100%",
        borderRadius: "0",
      },
      activeStyle: {
        color: "#333333",
        fontSize: "34rpx",
      },
      zphMoreLoading: "loadmore",
      reportMoreLoading: "loadmore",
      articleMoreLoading: "loadmore",
      issueMoreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      zphLoaded: false,
      reportLoaded: false,
      articleLoaded: false,
      issueLoaded: false,
      scrollY: true,
    };
  },
  onLoad(opt) {
    this.swiperCurrent = 0;
  },
  computed: {
    personId() {
      return uni.getStorageSync("person-id").slice(2) || "";
    },
  },
  mounted() {
    const { screenHeight } = uni.getSystemInfoSync();
    this.screenHeight = screenHeight;
  },
  methods: {
    handleSearchClick() {
      console.log("--------->");
      if (this.keyword) {
        this.$refs.search.saveHistory(this.keyword);
        this.isSearched = true;
        this.search();
      }
    },
    handleTagClick(keyword) {
      this.keyword = keyword;
      this.isSearched = true;
      this.search();
    },
    search() {
      this.zphPageParams.pageNo = 1;
      this.zphMoreLoading = "loadmore";
      this.reportPageParams.pageNo = 0;
      this.reportMoreLoading = "loadmore";
      this.articlePageParams.pageNo = 0;
      this.articleMoreLoading = "loadmore";
      this.issuePageParams.pageNo = 0;
      this.issueMoreLoading = "loadmore";
      this.zphLoaded = false;
      this.reportLoaded = false;
      this.articleLoaded = false;
      this.issueLoaded = false;
      this.getZphData();
      this.getReportData();
      this.getArticleData();
      this.getSpecialIssueData();
    },

    zphLoadMore() {
      this.getZphData(true);
    },
    reportLoadMore() {
      this.getReportData(true);
    },
    articleLoadMore() {
      this.getArticleData(true);
    },
    issueLoadMore() {
      this.getSpecialIssueData(true);
    },

    //获取招聘会数据
    getZphData(isMore) {
      if (this.zphMoreLoading == "loading" || this.zphMoreLoading == "nomore")
        return;
      const params = {
        keyword: this.keyword,
        pageNo: this.zphPageParams.pageNo,
        pageSize: this.zphPageParams.pageSize,
        timeType: "",
      };
      this.zphMoreLoading = "loading";
      getZphList(params)
        .then((res) => {
          this.zphMoreLoading = "loadmore";
          this.zphLoaded = true;
          if (res && res.code == 200) {
            let data = res.data.map((item) => {
              item.startTime = item.startTime.replace(/\-/g, ".");
              item.endTime = item.endTime.replace(/\-/g, ".");
              return item;
            });
            if (isMore) {
              this.zphList.push(...data);
            } else {
              this.zphList = data;
            }
            console.log(data);
            this.zphPageParams.pageNo++;
            if (this.zphPageParams.pageNo > res.pageparam.pages) {
              this.zphMoreLoading = "nomore";
            }
          } else {
            this.zphMoreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
              duration: 2000
            });
          }
        })
        .catch((err) => {
          this.zphMoreLoading = "nomore";
        });
    },
    //获取报告数据
    getReportData(isMore) {
      if (
        this.reportMoreLoading == "loading" ||
        this.reportMoreLoading == "nomore"
      )
        return;

      const params = {
        pageNo: this.reportPageParams.pageNo,
        pageSize: this.reportPageParams.pageSize,
        moduleType: "OCCUPATION_MODULE_TYPE",
        searchKeyword: this.keyword,
        personId: this.personId,
      };

      this.reportMoreLoading = "loading";
      reqGetIndexReportList(params, this.personId)
        .then((res) => {
          this.reportPageParams.loading = false;
          this.reportMoreLoading = "loadmore";
          this.reportLoaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.reportList.push(...res.data);
            } else {
              this.reportList = res.data;
            }
            if (this.reportPageParams.pageNo + 1 >= res.pageparam.pages) {
              this.reportMoreLoading = "nomore";
            }
            this.reportPageParams.pageNo++;
          } else {
            this.reportMoreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
              duration: 2000
            });
          }
        })
        .catch((e) => {
          this.reportMoreLoading = "nomore";
        });
    },
    //获取职讯数据
    getArticleData(isMore) {
      if (
        this.articleMoreLoading == "loading" ||
        this.articleMoreLoading == "nomore"
      )
        return;
      const params = {
        pageNo: this.articlePageParams.pageNo,
        pageSize: this.articlePageParams.pageSize,
        keyword: this.keyword,
        personId: this.personId,
      };
      this.articleMoreLoading = "loading";
      getJobInfo(params)
        .then((res) => {
          this.articlePageParams.loading = false;
          this.articleMoreLoading = "loadmore";
          this.articleLoaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.articleList.push(...res.data);
            } else {
              this.articleList = res.data;
            }
            if (this.articlePageParams.pageNo + 1 >= res.pageparam.pages) {
              this.articleMoreLoading = "nomore";
            }
            this.articlePageParams.pageNo++;
          } else {
            this.articleMoreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
              duration: 2000
            });
          }
        })
        .catch((e) => {
          this.articleMoreLoading = "nomore";
        });
    },
    //获取专刊数据
    getSpecialIssueData(isMore) {
      if (
        this.issueMoreLoading == "loading" ||
        this.issueMoreLoading == "nomore"
      )
        return;

      const params = {
        pageNo: this.issuePageParams.pageNo,
        pageSize: this.issuePageParams.pageSize,
        keyWord: this.keyword,
        loginPersonId: this.personId,
      };

      this.issueMoreLoading = "loading";
      getSpecialIssue(params)
        .then((res) => {
          this.issuePageParams.loading = false;
          this.issueMoreLoading = "loadmore";
          this.issueLoaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.specialIssueList.push(...res.data);
            } else {
              this.specialIssueList = res.data;
            }
            if (this.issuePageParams.pageNo + 1 >= res.pageparam.pages) {
              console.log("没有更多了----------------------");
              this.issueMoreLoading = "nomore";
            }
            this.issuePageParams.pageNo++;
          } else {
            console.log("出错-----没有更多了----------------------");
            this.issueMoreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
              duration: 2000
            });
          }
        })
        .catch((e) => {
          this.issueMoreLoading = "nomore";
        });
    },
    tabsChange(index) {
      this.swiperCurrent = index;
      console.log("现在点击的是----------->", this.swiperCurrent);
    },
    scroll(e) {
      let now = new Date().valueOf();
      if (now - this.oldTime > 500) {
        if (e.detail.deltaY > 0) {
          if (!this.tolower) return;
          this.tolower = false;
        } else {
          if (this.tolower) return;
          this.tolower = true;
        }
        this.oldTime = now;
      }
    },
    handleTransition(e) {
      let dx = e.detail.dx;
      this.$refs.tabs.setDx(dx);
    },
    handleAnimation(e) {
      let current = e.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    handleUpdate(data, index) {
      console.log(data, index);
      if (data.operateType == "favorite") {
        this.articleList[index].isFavorite = data.type == "add" ? "1" : "0";
      } else if (data.operateType == "praise") {
        this.articleList[index].isPraise = data.type == "add" ? "1" : "0";
        this.articleList[index].likeCnt =
          data.type == "add"
            ? this.articleList[index].likeCnt + 1
            : this.articleList[index].likeCnt - 1;
      }
    },
    handleDelete(data, index, type) {
      let detail = data.detail;
      console.log("搜索点击删除:", data);
      console.log(this.screenHeight);
      console.log("123");
      this.deleteIndex = index;
      this.deleteItem = data.item;
      this.deleteType = type;
      let top = detail.y;
      let left = detail.x - 67 - 20;
      this.arrowLeft = left;

      if (top > (this.screenHeight * 2) / 3) {
        this.isModalTop = true;
        top = top - 20;
        top = this.screenHeight - top;
        this.modalStyle = {
          bottom: top + "px",
        };
      } else {
        this.isModalTop = false;
        top = top + 20;
        this.modalStyle = {
          top: top + "px",
        };
      }

      this.showDeleteModal = true;
    },
    // 不感兴趣
    handleDislike() {
      const params = {
        linkType: "",
      };
      console.log(this.deleteType);
      if (this.deleteType == "article") {
        params.linkType = 3;
        params.moduleId = this.deleteItem.articleId;
      } else if (this.deleteType == "video") {
        params.linkType = 4;
      } else if (this.deleteType == "specialIssue") {
        params.linkType = 6;
        params.moduleId = this.deleteItem.issueId;
      }
      console.log("this.handleUpdateLink");
      this.handleUpdateLink(params);
    },
    handleShiedldAuthor() {
      this.showDeleteModal = false;
      console.log(this.deleteType);
      console.log(this.deleteItem);
      console.log("123");
      uni.showModal({
        title: "提示",
        content:
          "确定要屏蔽 " +
          (this.deleteItem.ownName ||
            this.deleteItem.personDetail.personIname) +
          "吗？",
        success: (res) => {
          if (res.confirm) {
            this.shiedldAuthor();
          }
        },
      });
    },
    // 屏蔽作者
    shiedldAuthor() {
      const params = {
        moduleId:
          this.deleteItem.ownId || this.deleteItem.personDetail.personId,
      };
      params.linkType = 1;
      console.log(params);
      this.handleUpdateLink(params);
    },
    handleUpdateLink(params) {
      params = Object.assign(
        {
          isLink: 1,
          linkUserId: this.personId,
          moduleType: "FORBIT_MODULE_TYPE",
        },
        params
      );

      updateLink(params).then((res) => {
        if (res.code == 200) {
          console.log("屏蔽作者成功");
          if (this.deleteType == "article") {
            console.log("刷新职讯数据");
            if (params.linkType == 1) {
              this.articleList = this.articleList.filter((o) => {
                return o.personDetail.personId != params.moduleId;
              });
            } else {
              this.articleList.splice(this.deleteIndex, 1);
            }
          } else if (this.deleteType == "specialIssue") {
            console.log("刷新专刊数据");
            if (params.linkType == 1) {
              this.specialIssueList = this.specialIssueList.filter((o) => {
                return o.ownId != params.moduleId;
              });
            } else {
              this.specialIssueList.splice(this.deleteIndex, 1);
            }
          }
          this.showDeleteModal = false;
        } else {
          console.log("屏蔽作者失败");
          uni.showToast({
            title: res.status_desc,
            icon: "error",
            duration: 2000
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  position: relative;
  width: 750rpx;
  overflow: hidden;

  ::v-deep .nodata {
    padding-top: 200rpx;
  }
}

.navBarContainer {
  position: relative;
  padding: 16rpx 32rpx;
  height: 108rpx;
  background-color: #fff;
  transition: height 0.4s;

  .icon-search-out {
    position: absolute;
    z-index: 2;
    top: 26rpx;
    right: -72rpx;
    width: 48rpx;
    height: 48rpx;
    background-image: url($img-base + "common/search.png");
    transition: right 0.4s;
    transition-delay: 0s;
  }

  .box-bg {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-left: 32rpx;
    background-color: #f4f4f4;
    border-radius: 40rpx;
    width: 686rpx;
    left: 32rpx;
    top: 16rpx;
    transition: left 0.4s;
    transition: top 0.4s;

    .icon-search {
      width: 48rpx;
      height: 48rpx;
      background-image: url($img-base + "common/search.png");
    }

    .input-view {
      flex-grow: 1;
      position: relative;
      height: 76rpx;
      margin-left: 8rpx;
      padding-right: 20rpx;
    }

    .btn-search {
      width: 126rpx;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 40rpx;
    }
  }

  &.tolower {
    padding: 0;
    height: 0;

    .box-bg {
      top: -80rpx;
    }

    .icon-search-out {
      right: 40rpx;
      transition-delay: 0.2s;
    }
  }
}

.afterSearch {
  height: 1px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;

  .tabs-wrap {
    background-color: #fff;
    padding-bottom: 14rpx;
  }

  .tabs {
    display: block;
    width: 500rpx;
  }

  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 200rpx auto 0;

    .emptyImg {
      width: 400rpx;
      height: 400rpx;
    }

    .emptyText {
      height: 36rpx;
      font-size: 26rpx;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #888888;
      line-height: 36rpx;
      margin-bottom: 16rpx;
    }

    .emptyText2 {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
  }

  .swiper-box {
    flex-grow: 1;
    height: 1rpx;
    display: flex;
    flex-direction: column;

    .swiper-item,
    .scroll-views {
      height: 100%;
    }
  }

  .zph-list {
    padding-left: 32rpx;

    .item {
      &:first-child {
        display: inline-block;
        margin-top: 32rpx;
      }

      &:nth-of-type(2n + 1) {
        margin-right: 22rpx;
      }
    }
  }
}
</style>

<style lang="scss">
.modal-drawer {
  display: block;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  .modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    transition: all 0.25s ease-in-out 0s;
    transform: scale(1, 1);
  }

  .modal-drawer-content {
    position: absolute;
    left: 32rpx;
    right: 32rpx;

    .icon-arrow-up,
    .icon-arrow-down {
      position: absolute;
      right: 22rpx;
      width: 135rpx;
      height: 16rpx;
      background-size: 100%;
    }

    .icon-arrow-up {
      top: -16rpx;
      background-image: url($img-base + "career/modal-top-bg.png");
    }

    .icon-arrow-down {
      bottom: -16rpx;
      background-image: url($img-base + "career/modal-bottom-bg.png");
    }
  }

  .delete-box {
    background-color: #fff;
    border-radius: 12rpx;

    .delete-item {
      display: flex;
      align-items: center;
      margin: 0 30rpx;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #f5f5f5;

      &:last-child {
        border: none;
      }

      .item-content {
        &-title {
          margin-bottom: 2rpx;
          font-size: $uni-font-size-lg;
          color: #000000;
        }

        &-lable {
          font-size: $uni-font-size-nor;
          color: #999999;
        }
      }
    }

    .icon {
      margin-right: 28rpx;
      width: 36rpx;
      height: 36rpx;
      background-size: 100% 100%;
    }

    .icon-delete {
      background-image: url($img-base + "career/close.png");
    }

    .icon-shield {
      background-image: url($img-base + "career/shield.png");
    }
  }
}
</style>
